<template>
  <view>
    <view class="content">
      <view class="info">
        <ul>
          <li>
            <view class="list_l">
              <text class="red">*</text>
              <text>项目名称</text>
            </view>
            <view class="list_r">
              <input placeholder-class = 'placeholder-class' type="text" placeholder="请填写" />
              <text class="select">></text>
            </view>
          </li>
          <li>
            <view class="list_l">
              <text class="red">*</text>
              <text>开始时间</text>
            </view>
            <view class="list_r">
              <picker mode="date" :value="date" @change="bindsDateChange">
                <input placeholder-class = 'placeholder-class' type="text" v-model="sdata" disabled placeholder="请选择" />
              </picker>
              <text class="select">></text>
            </view>
          </li>
          <li>
            <view class="list_l">
              <text class="red">*</text>
              <text>结束时间</text>
            </view>
            <view class="list_r">
              <picker mode="date" :value="date" @change="bindeDateChange">
                  <input placeholder-class = 'placeholder-class' type="text" v-model="edata" disabled placeholder="请选择" />
              </picker>
              <text class="select">></text>
            </view>
          </li>
          <li>
            <view class="list_l">
              <text class="red">*</text>
              <text>当担任务</text>
            </view>
            <view class="list_r">
              <input placeholder-class = 'placeholder-class' type="text" placeholder="请填写" />
              <text class="select">></text>
            </view>
          </li>
          
          <li>
            <view class="list_l">
              <text class="red">*</text>
              <text>项目介绍</text>
            </view>
            <view class="list_r grayColor">
            </view>
          </li>
        </ul>
        <textarea value="" placeholder="请填写" />
      </view>
      <view class="save">
        保存
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
      const currentsDate = this.getDate({
        format: true
      })
      return {
        educationArray: ['低能儿', '小学生', '初中生', '高中生', '中专', '专科', '本科', '研究生', '博士','绝地科学家'],
        educationIndex: '1',
        // date: currentDate,
        date: currentsDate,
        sdata: '',
        edata: '',
      }
    },
    comments: {},
    methods: {
      bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.target.value)
        this.educationIndex = e.target.value
        this.ifleft = true
      },
      // bindDateChange: function(e) {
      //     this.date = e.target.value
      // },
      bindsDateChange: function(e) {
        this.sdata = e.target.value
      },
      bindeDateChange: function(e) {
        this.edata = e.target.value
      },
      getDate(type) {
        const date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
  
        if (type === 'start') {
          year = year - 60
        } else if (type === 'end') {
          year = year + 2
        }
        month = month > 9 ? month : '0' + month
        day = day > 9 ? day : '0' + day
        return `${year}-${month}-${day}`
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    .red {
      color: red;
    }
    .grayColor {
      color: #dddddd;
    }
    .select {
      color: #dddddd;
      font-size: 35rpx;
      margin-left: 2rpx;
    }
    .placeholder-class {
      color: #dddddd;
      font-size: 30rpx;
      text-align: right;
    }
    .inColor {
      color: #333;
    }
    background-color: #f1f1f1;
    .info {
      background-color: #ffffff;
      margin-top: 10rpx;
      padding: 0 50rpx 20rpx;
      ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 88rpx;
        border-bottom: 1px solid #dddddd;
        font-size: 30rpx;
        font-weight: 500;
        color: #333333;
        padding-top: 10rpx;
        .list_r {
          display: flex;
          align-items: flex-end;
          input {
            text-align: right;
          }
        }
      }
      textarea {
        height: 180rpx;
      }
    }
    
    .save {
      width: 650rpx;
      height: 88rpx;
      background:rgba(1,132,233,1);
      border-radius:6px;
      margin: 30rpx auto ;
      font-size:34rpx;
      font-weight:500;
      color:rgba(255,255,255,1);
      text-align: center;
      line-height: 88rpx;
    }
  }
</style>
